<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core">
    <h:head>
        <title>Ultimo Juego</title>
        <link href="styles/style1.css" rel="stylesheet"/>
        <script type="text/javascript" src="scripts/chart_extender.js" />
    </h:head>
    <h:body>
        <div class="game sidebar">
            <h:link value="Inicio" outcome="index" />
            <br/>
            <br/>
            <h:link value="Anterior" outcome="game" rendered="#{gameStatistics.game.hasPreviousGame()}">
                <f:param name="game" value="#{gameStatistics.game.previousGame.id}" />
            </h:link>
            <br/>
            <h:link value="Siguiente" outcome="game" rendered="#{gameStatistics.game.hasNextGame()}">
                <f:param name="game" value="#{gameStatistics.game.nextGame.id}" />
            </h:link>
        </div>
        <div class="stat main">
            <div>Juego #{gameStatistics.game.id} (#{gameStatistics.game.formattedLength()}) #{gameStatistics.game.formattedDate()}</div>
            <br/>
            <p:separator/>
            <ui:insert name="CTF" >
                <ui:include src="game_ctf.xhtml" />
            </ui:insert>
            <br/>
            <p:separator/>

            <div>MVP</div>
            <div class="gamePlayerList teams">
                <p:dataList value="#{gameStatistics.game.MVPs}" var="player" itemType="none" >
                    <div class="playerImage">
                        <ui:insert name="playerList" >
                            <ui:include src="player_image.xhtml" >
                                <ui:param name="imageSize" value="64" />
                                <ui:param name="playerId" value="#{player.id}" />
                            </ui:include>
                        </ui:insert>
                    </div>
                </p:dataList>
            </div>
            <br/>
            <p:separator/>

            <p:dataTable id="kills" var="bluePlayer" value="#{gameStatistics.game.blueTeam}">
                <p:columns value="#{gameStatistics.playerToPlayerKillsColums}" var="redPlayer" columnIndexVar="colIndex">
                    <f:facet name="header">
                        <p:panel rendered="#{redPlayer == null}">
                        </p:panel>
                        <p:panel rendered="#{redPlayer != null}" style="overflow: hidden; background: none; border: none;">
                            <div class="playerImage">
                                <ui:insert name="playerList">
                                    <ui:include src="player_image.xhtml" >
                                        <ui:param name="imageSize" value="64" />
                                        <ui:param name="playerId" value="#{redPlayer.id}" />
                                    </ui:include>
                                </ui:insert>
                            </div>
                        </p:panel>
                    </f:facet>
                    <p:panel rendered="#{redPlayer == null}" style="overflow: hidden; background: none; border: none;">
                        <div class="playerImage">
                            <ui:insert name="playerList">
                                <ui:include src="player_image.xhtml" >
                                    <ui:param name="imageSize" value="64" />
                                    <ui:param name="playerId" value="#{bluePlayer.id}" />
                                </ui:include>
                            </ui:insert>
                        </div>
                    </p:panel>
                    <p:panel rendered="#{redPlayer != null}" style="overflow: hidden; background: none; border: none; font-size: 150%;">
                        <span>#{gameStatistics.game.kills(bluePlayer,redPlayer)}</span>
                        /
                        <span>#{gameStatistics.game.kills(redPlayer,bluePlayer)}</span>
                    </p:panel>
                </p:columns>
            </p:dataTable>




            <br/>
            <p:separator/>
            <p:lineChart id="chartPointsDuringGame" value="#{gameStatistics.chartPointsDuringGame}"
                         legendPosition="nw" title="Puntos durante el juego" minX="0" minY="0" style="height:500px" extender="jqplotChartExtender" />

            <br/>
            <p:separator/>

            <div>Seccion de pijeos</div>
            <h:form>
                <p:dataTable id="comment_table" value="#{gameStatistics.game.comments}" var="comment" >
                    <p:column width="10%">
                        #{comment.formattedCreatedDate} por #{comment.ipAddress}
                    </p:column>
                    <p:column width="90%">
                        <h:outputText value="#{comment.text}" style="word-wrap: break-word; white-space:normal" />
                    </p:column>
                </p:dataTable>
                <br/>
                <h:outputLabel for="comment_text" value="Su Pijeo" styleClass="suggestionLabel" />
                <p:inputTextarea id="comment_text" value="#{gameStatistics.commentText}" maxlength="1024" cols="80" rows="3" styleClass="suggestionInput" />
                <p:messages id="messages" showDetail="true" autoUpdate="true" closable="true" />
                <p:commandButton value="Agregar Pijeo" action="#{gameStatistics.addComment()}" update="comment_text,comment_table" />
            </h:form>
        </div>
    </h:body>
</html>

